<template>
    <header>
        <div class="fenlei">
            <img src="@/assets/image/fenlei.png" alt="">
        </div>
        <div class="search">
            <span>笨熊商城</span>
            <e>|</e>
        </div>
        <div class="searchipt">
            <input type="text" placeholder="山河无恙，人间皆安">
        </div>
        <div class="liaotiao">
            <i class="iconfont icon-wode"></i>
        </div>
    </header>
</template>

<script setup>

</script>

<style scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    padding: 0.2rem 0.1rem;
    background-color: #ded7d7;
    /* border-bottom:  1px solid #ccc; */
    box-sizing:border-box;
}
header .fenlei img{
    width: 0.6rem;
    height: 0.6rem;
    line-height: 0.7rem;
    margin-top: 0.3rem;
    margin-left: 0.2rem;
}
header .search span{
    color: #1296db;
    font-weight: 700;
}
header .search e{
    font-weight: 200;
    margin-left: 0.3rem;
}

header .searchipt input{
    width: 140px;
    height: 0.6rem;
    border-radius: 15px;
    padding-left: 0.2rem;
    margin-bottom: 0.1rem;
    border: #333;
}

header .searchipt input:focus{
    outline: none;
}

header .liaotiao i {
    font-size: 0.7rem;
    line-height: 1rem;
    margin-right: 0.1rem;
    color: #1296db;
}
</style>